<template>
<!-- 组织架构 -->
   <div class="dashboard-container">
      <div class="app-container">
         <!-- 组织机构的内容 -->
         <!-- 头部 -->
         <el-card class="tree-card">
            <!-- 放置内容 -->
            <TreeTools
               :treeNode="company"
               :isRoot="true"
               @addDepts="addDepts"
            ></TreeTools>
            <el-tree
               :data="departs"
               :props="defaultProps"
               :default-expand-all="true"
            >
               <!-- 传入插槽内容 会循环多次，有多少节点就循环多少次-->
               <!-- 作用于插槽， slot-scope="{ node, data }"  slot="obj" 接受传递给插槽的数据 
            data 就是每个节点的数据对象，每一次拿到的数据，对象
            -->
               <TreeTools
                  slot-scope="{ data }"
                  :treeNode="data"
                  @delDepts="getPanes"
                  @addDepts="addDepts"
                  @editDepts="editDepts"
               ></TreeTools>
            </el-tree>
         </el-card>
         <!-- 新增 -->
         <AddDept
            :showDialog.sync="showDialog"
            :treeNode="node"
            @addDepts="getPanes"
            ref="addDept"
         ></AddDept>
      </div>
   </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import { getDepartments } from '../../api/departments'
import { tranListToTreeData } from '@/utils'
import AddDept from './components/add-dept.vue'
export default {
   components: {
      TreeTools,
      AddDept
   },
   data() {
      return {
         company: {
            // 头部的内容
            name: '',
            manager: ''
         },
         departs: [],
         defaultProps: {
            //   表示从这个属性显示内容
            label: 'name'
         },
         // 默认不显示弹层
         showDialog: false,
         // 记录当前点击的 node 节点
         node: null
      }
   },
   created() {
      // 调用自身的方法
      this.getPanes()
   },
   methods: {
      // 获取数据
      async getPanes() {
         const result = await getDepartments()
         // console.log(result)
         this.company = {
            name: result.companyName,
            manager: '负责人',
            id: ''
         }
         // 需要将他转换成树形结构,封装一个 函数 （递归）
         this.departs = tranListToTreeData(result.depts, '')
      },
      // 监听 tree-tools 中触发的点击添加子部门的事件
      // node 使我们点击的部门
      addDepts(node) {
         // 显示弹层
         this.showDialog = true
         this.node = node
      },
      // 原始写法
      // test(value) {
      //    this.showDialog = value
      // }
      editDepts(node) {
         // 弹出层
         this.showDialog = true
         this.node = node
         // console.log(this.$refs.addDept)
         // 父组件调用子组件的函数通过 ref在自定义的组件上
         this.$refs.addDept.getDepartDetail(node.id)
      }
   }
}
</script>

<style scoped>
.tree-card {
   padding: 30px 140px;
   font-size: 14px;
}
</style>
